<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" %> 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Customer Money Transfer</title>
	
		<link rel="stylesheet" href="<c:url value="css/bootstrap.min.css" />"
			type="text/css" />
		<link rel="stylesheet"
			href="<c:url value="css/animate.css" />" type="text/css" />
		<link rel="stylesheet"
			href="<c:url value="font-awesome-4.2.0/css/font-awesome.min.css" />"
			type="text/css" />
		<link rel="stylesheet"
			href="<c:url value="css/style.css" />" type="text/css" />
		
		<!-- SCRIPT -->
		<script src="<c:url value="js/jquery/jquery.min.js" />"
			type="text/javascript"></script>
		
		<script>
			$(document).ready(function(e){
				$("#radioChooseAccount").change(function(e){
					$("#selectAccount").attr("disabled", false);
					$("#txtInputAccount").attr("disabled", true);
				});
				$("#radioInputAccount").change(function(e){
					$("#selectAccount").attr("disabled", true);
					$("#txtInputAccount").attr("disabled", false);
				});
				$("#selectAccount").attr("disabled", false);
				$("#txtInputAccount").attr("disabled", true);
				$("#btnTripleZero").bind('click', function(e){
					$("#txtAmount").val($("#txtAmount").val() + "000");
					$("#txtAmount").trigger("input");
				});
				$("#btnDoubleZero").bind('click', function(e){
					$("#txtAmount").val($("#txtAmount").val() + "00");
					$("#txtAmount").trigger("input");
				});
				$("#createTransactionForm").submit(function(e){
					e.preventDefault();
					var res = true;
					var checked = $("#radioInputAccount:checked").val();
					if (checked != null || checked != undefined) {
						if ($("#txtInputAccount").val() == false) {
							res = false;
							$("#txtInputAccountError").slideDown();
						} else {
							res &= true;
							$("#txtInputAccountError").slideUp();
						}
					}
					if ($("#txtAmount").val() == "") {
						res = false;
						$("#txtAmountError").slideDown();
					} else {
						res &= true;
						$("#txtAmountError").slideUp();
					}
					if (res) {
						$.ajax({ 
					        type: 'post', 
					        url: 'createTransaction', 
					        data: $("#createTransactionForm").serialize(),
					        datatype: 'json',
					        success: function (data) { 
								console.log(data);
								if (data.success == true) {
									window.location = "history";
								} else {
									var liElement = "<ul>";
									for (var i = 0; i < data.messages.length; i++) {
										liElement += "<li class='error'>" + data.messages[i] + "</li>";
									}
									liElement += "</ul>";
									//errorPanel
									$("#errorMessageBody").html(liElement);
									$("#errorPanel").slideDown();
								}
					        }
					    });
					} else {
						return false;
					}
				});
				$(".panel-heading").bind("click", function(e){
					$(this).closest(".panel").children(".panel-body").slideToggle();
				});
				$("#txtAmount").bind('input', function(e){
					var input = parseInt($("#txtAmount").val());
					$("#formatedInput").html(input.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"));
				});
			});
		</script>
	</head>
	<body class="container-fluid">
		<header class="row">
			<div id="logocontainer" class="col-md-2">
				<img src="images/logo.png"/>		
			</div>
			<div class="col-md-10 status-container">
				<h1 class="welcomeMessage">Welcome user</h1>
			</div>
			<div class="bg-trees"></div>
		</header>
		<section id="maintab" class="row">
			<div id="tabheader" class="col-md-2">
				<div class="tabheaderitem"><a href="customerInfo"><span class="fa fa-info"></span> Account Info</a></div>
				<div class="tabheaderitem"><a href="changePassword"><span class="fa fa-cogs"></span> Change password</a></div>
				<div class="tabheaderitem active"><a href="moneyTransfer"><span class="fa fa-random"></span> Money transferring</a></div>
				<div class="tabheaderitem"><a href="history"><span class="fa fa-history"></span> Transaction history</a></div>
				<div class="customerInfo">
					<span class="fa fa-user"></span> ${customer.firstName} ${customer.lastName}<br>
					<span class="fa fa-money"></span> <fmt:formatNumber type="number" maxFractionDigits="3" value="${customer.amount}" /> VND
				</div>
			</div>
			<div id="bodycontainer" class="col-md-9 container-fluid">
				<h3 class="headerMessage">Your account number: ${customer.accountNumber} - available number: <fmt:formatNumber type="number" maxFractionDigits="3" value="${customer.amount}" /> VND</h3>
				<div class="col-md-12">
					<div class="panel panel-info">
						  <div class="panel-heading"><span class="fa fa-pencil"></span> Today's transaction: ${numberOfTransaction},  amount: ${transferredAmount} (click to show/hide note)</div>
						  <div class="panel-body">
						  	Một số điều bạn nên biết:<br>
							You should know:						
							<ul>
								<li>Bạn có thể giao dịch chuyển tiền 3 lần trong 1 ngày.<br> You can make 3 transactions per day.</li>
								<li>Tổng số tiền bạn có thể chuyển khoản mỗi ngày không thể quá 30.000.000VND.<br> The total amount of money transferred cannot exceed 30,000,000VND each day.</li>
								<li>Nếu giá trị giao dịch của bạn bằng hoặc thấp hơn 5.000.000VND thì giao dịch đó sẽ được tự động thực hiện ngay, nếu giao dịch đó vượt mức 5.000.000VND thì nó cần phải nhận sự kiểm duyệt của chúng tôi trước khi được thực thi.<br>  
								If the transferred amount of money is not more than 5,000,000VND, your transaction will be automatically approved. Otherwise, it must pass our censorship before executed.</li>
							</ul>
						  </div>
					</div>
				</div>
				<form class="col-md-8" method="post" action="createTransaction" id="createTransactionForm">
					<div class="group-panel clearfix form-group">
						<label>Receiver account</label>
						<div class="row-fluid">
							<div class="input-group">
							      <span class="input-group-addon">
							        	<label>
										    <input type="radio" id="radioChooseAccount" checked value="fromListAccount" name="optionChooseAccount" aria-label="...">
										    From previous transaction
										</label>
							      </span>
							      <select class="form-control" id="selectAccount" name="selectTargetAccountNumber">
										<c:forEach var="receiver" items="${customerList}">
											<option value="${receiver.accountNumber}">${receiver.firstName} ${receiver.lastName} - ${receiver.accountNumber}</option>
										</c:forEach>
								</select>
						    </div><!-- /input-group -->
						    
						    <div class="input-group">
							      <span class="input-group-addon">
							        	<label>
										    <input type="radio" id="radioInputAccount" value="fromInputAccount" name="optionChooseAccount">
										    Enter account to transfer
										</label>
							      </span>
							      <input type="text" class="form-control" id="txtInputAccount" name="targetAccountNumber"/>
						    </div><!-- /input-group -->
						    <label class="text-danger" id="txtInputAccountError">please enter an account!</label>
						</div>
					</div>
					<div class="form-group">
						<label>Transfered Amount:</label>
						<div class="input-group">
						      <input type="number" name="amount" class="form-control" id="txtAmount" min="5000" step="5000"/>
						      <div class="input-group-addon">VND</div>
						      <span class="input-group-btn">
						        <button class="btn btn-default" type="button" id="btnTripleZero">.000</button>
						        <button class="btn btn-default" type="button" id="btnDoubleZero">.00</button>
						      </span>
					    </div>
						<p id="formatedInput"></p>
						<label class="text-danger" id="txtAmountError">Please enter ammount</label>
					</div>
					<div class="form-group">
						<label>Content:</label>
						<textarea rows="4" class="form-control" name="description"></textarea>
					</div>
					<input type="submit" class="btn btn-primary" value="submit"/>
				</form>
				<div class="col-md-4">
					<div class="panel panel-danger" id="errorPanel">
						  <div class="panel-heading"><span class="fa fa-remove"></span> Khong the thuc hien giao dich</div>
						  <div class="panel-body" id="errorMessageBody">
						  </div>
					</div>
				</div>
			</div>
			<div class="col-md-1 status">
				<a href="logout"><span class="fa fa-lock"></span></a>
				<a><span class="fa fa-question-circle"></span></a>
				<a><span class="fa fa-download"></span></a>
			</div>
		</section>
		<footer>
			cdc_bank@csc.com
		</footer>
	</body>
</html>
